<script setup lang="ts">
import { onMounted, ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReCol from "@/components/ReCol";
import { usePublicHooks } from "../hooks";
import { getRoleShow } from "@/api/roleApi";
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    name: "",
    sort: 1,
    remarks: "",
    menuIds: [],
    rbacRoleId: null,
    permissionChar: "",
    status: 0,
    title: "",
	menuIdsOptions: []
  })
});

const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}
const checkStrictly = ref(true)
const menuListTree = ref()
const currentChange = (data, check, node) => {
	// let arr = [...menuListTree.value.getCheckedKeys(),...menuListTree.value.getHalfCheckedKeys()]
	// newFormInline.value.parentArr = arr
}
onMounted(async () => {
  if (newFormInline.value.title != "新增") {
    getRoleShow({ rbacRoleId: newFormInline.value.rbacRoleId }).then(result => {
      newFormInline.value.menuIds = result.result.menuIds;
    });
  }
  checkStrictly.value = false
});
defineExpose({ getRef });

</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="角色名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入角色名称"
          />
        </el-form-item>
      </re-col>
	  
	  <re-col :value="24" :xs="24" :sm="24">
	  		<el-form-item label="角色菜单" prop="menuIds">
	  		  <!-- <el-tree
	  			  ref="menuListTree"
	  			  :data="newFormInline.menuIdsOptions"
	  			  :default-checked-keys="newFormInline.menuIds"
	  			  show-checkbox
	  			  default-expand-all
	  			  node-key="rbacMenuId"
	  			  highlight-current
	  			  :check-strictly="checkStrictly"
	  			  @check="currentChange"
	  			   v-if="newFormInline.menuIdsOptions && newFormInline.menuIdsOptions.length > 0"
	  			  :props="{
	  				  value: 'rbacMenuId',
	  				  label: 'name',
	  				  multiple: true
	  			  }"
	  			/>
	  			<div v-else style="color: #909399;">暂无数据</div> -->
	  		</el-form-item>
	  </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="排序">
          <el-input-number
            v-model="newFormInline.sort"
            class="!w-full"
            controls-position="right"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24" prop="remarks">
        <el-form-item label="备注">
          <el-input
            v-model="newFormInline.remarks"
            placeholder="请输入备注信息"
            type="textarea"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
